<template>
	<view class="content">
		<!-- <view class="banner">
			<image src="../../static/images/homemaking/图片-2@2x_03.png" mode=""></image>
		</view> -->
		<view class="real_list">
			<view class="title">物业服务</view>
			<view class="list">
				<view class="item" v-for="(item,index) in real_list" :key="index" @tap="to(item)">
					<!-- <image :src="item.src"></image> -->
					<view class="iconfont iconColor iconFontSize">{{item.iconfontImg}}</view>
					<view class="text" style="padding-top: 20rpx;">{{item.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		hasOwner
	} from '@/api/owner/ownerApi.js'
	export default {
		name: "serviceProperty",
		data() {
			return {
				real_list: [],
			};
		},
		created() {
			this._loadMenu();
		},
		methods: {
			to: function(v) {
				if (v.name == '商圈') {
					uni.switchTab({
						url: v.href
					})
				} else if (v.href != '') {
					if (v.needLogin == 'N') {
						uni.navigateTo({
							url: v.href
						});
						return;
					}
					hasOwner();
					uni.navigateTo({
						url: v.href
					});

				} else {
					uni.showToast({
						icon: 'none',
						title: '此功能暂不开放'
					})
				}
			},
			_loadMenu: function() {
				this.real_list = [{
						name: '生活缴费',
						src: this.imgUrl + '/h5/images/serve/1.png',
						href: '/pagesA/oweFee/oweFeeType',
						iconfontImg: '\ufaa9'
					},
					{
						name: '家庭成员',
						src: this.imgUrl + '/h5/images/serve/2.png',
						href: '/pagesA/familyList/familyList',
						iconfontImg: '\ue65e'
					},
					{
						name: '访客登记',
						src: this.imgUrl + '/h5/images/serve/3.png',
						href: '/pagesB/visit/visitList',
						iconfontImg: '\ue656'
					},
					{
						name: '投诉咨询',
						src: this.imgUrl + '/h5/images/serve/4.png',
						href: '/pages/complaint/complaint',
						iconfontImg: '\ue6a6'
					},
					{
						name: '报事维修',
						src: this.imgUrl + '/h5/images/serve/6.png',
						href: '/pagesA/repair/repair',
						iconfontImg: '\ue61e'
					},
					{
						name: '社区公告',
						src: this.imgUrl + '/h5/images/serve/7.png',
						href: '/pages/notice/index',
						iconfontImg: '\ue638'
					},
					{
						name: '业主信息',
						src: this.imgUrl + '/h5/images/serve/my1.png',
						href: '/pages/viewBindOwner/viewBindOwner',
						iconfontImg: '\ue60f'
					},
					{
						name: "我的车位",
						src: this.imgUrl + "/h5/images/serve/my6.png",
						href: "/pagesA/parkingInfo/myParking",
						iconfontImg: '\ue658'
					},
					// {
					// 	name: '我的物业',
					// 	src: this.imgUrl + '/h5/images/serve/my9.png',
					// 	href: '/pages/myProperty/myProperty',
					// 	iconfontImg: '\ue614'
					// },
					{
						name: '交房预约',
						src: this.imgUrl + '/h5/images/serve/10.png',
						href: '/pagesA/roomReservation/roomReservation',
						iconfontImg: '\ue62a'
					},
					{
						name: '人脸采集',
						src: this.imgUrl + '/h5/images/serve/2.png',
						href: '/pages/faceCollect/faceCollect',
						iconfontImg: '\ue601'
					},
					{
						name: '我的房屋',
						src: this.imgUrl + '/h5/images/serve/my3.png',
						href: '/pagesB/my/myHouse',
						iconfontImg: '\ue600'
					},
					{
						name: '电子门禁',
						src: this.imgUrl + '/h5/images/serve/7.png',
						href: '/pagesB/electronicEntranceGuard/electronicEntranceGuard',
						iconfontImg: '\ue672'
					}
				];
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		width: 100%;
		height: 100vh;
		background: #191b1f;
	}

	.banner {
		width: 100%;
		height: 700rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.real_list,
	.live_list {
		background: #191b1f;
		padding: 60rpx 40rpx 0;
		margin-top: 0rpx;
		// padding-top: 20upx;

		.title {
			line-height: 32rpx;
			background: #191b1f;
			// background: #0d1724;
			font-size: 30rpx;
			font-weight: 600;
			color: white;
			padding: 40rpx 0;
			margin-top: 0rpx;
			padding-top: 10rpx;
		}

		.list {
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
		}

		.item {
			padding: 10rpx;
			width: 30%;
			display: inline-block;
			text-align: center;
			border-radius: 10upx;
			// box-shadow: 0 0 5rpx #bdb7ab;
		}

		.text {
			color: #fff;
			font-size: 28upx;
		}

		.iconFontSize {
			margin: auto;
			width: 130rpx;
			height: 130rpx;
			background: #32323b;
			border-radius: 50%;
			text-align: center;
			line-height: 130rpx;
			font-size: 70rpx;
		}
	}
</style>
